<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>搜索AD</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <!--    <script src="/static/antd/dist/jquery.js"></script>-->
    <script src="/static/search/js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">

</head>
<body>
<div id="app" style="min-width: 1332px;">
    <!-- 顶部 -->
    <div style="position: fixed; width: 100%; z-index: 999;top: 0;">
        <a-collapse>
            <a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
                              th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
                <a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
                   th:if="${session.loginUser==null}">登录</a>
                <div style="width: 50%; margin: 25px auto">
                    <a-button @click="cart" type="primary" style="width: 100%;">
                        购物车
                    </a-button>
                </div>
                <div style="width: 50%; margin: 0 auto">
                    <!--                    <a-input
                                                v-model="keywordInput"
                                                placeholder="请输入关键字"
                                                id="keyword_input"
                                                th:value="|param.keyword|"
                                                style="width: 90.6%;"
                                        >
                                        </a-input>
                                        <a-button @click="onSearch">搜索</a-button>-->
                    <a-input-search
                            v-model="keywordInput"
                            placeholder="请输入关键字"
                            enter-button="搜索"
                            size="large"
                            @search="onSearch"></a-input-search>
                </div>
                <br/>
                {{keywordInput}}
                [[${param.keyword}]]
            </a-collapse-panel>
        </a-collapse>
    </div>
    <!-- todo 无商品提示 -->
<!--        [[${result.getProducts()}]]-->
<!--    <div style="display: flex; justify-content: center; align-items: center; font-size: 5rem;">
        <div th:if="${result.getProducts()?}">
            暂无相关商品
&lt;!&ndash;            <a-button onclick="sssss" th:href="|http://shushan.com|">回到主页</a-button>&ndash;&gt;
            <a-button onclick="sssss" >回到主页</a-button>
        </div>
    </div>-->
    <!-- 右边检索条件栏 -->
    <div>
        <a-button type="primary" @click="showDrawer" style="position: fixed;z-index: 999;top: 8px;left: 5px;">
            检索
        </a-button>
        <a-drawer
                title="检索"
                width="500"
                placement="left"
                :closable="false"
                :visible="visible"
                @close="onClose"
        >
            <div style="border: 2px cadetblue dashed; margin-bottom: 16px;">
                <div>
                    <span>检索条件：</span>
                </div>
                <a-card>
                    <a-button-group th:each="nav : ${result.navs}" style="margin-right: 10px;margin-bottom: 8px;">
                        <div style="width: 103px;
                                height: 40px;
                                cursor: pointer;
                                color: cadetblue;
                                text-align: center;
                                border: cadetblue 1px solid;
                                font-size: 12px;">
                            <span th:text="${nav.getNavName()}"></span>
                            <br/>
                            <span style=" overflow: hidden;
                                    white-space: nowrap;
                                    display: block;
                                    text-overflow: ellipsis;" th:text="${nav.getNavValue()}"></span>
                        </div>
                        <a-button th:href="${nav.link}" type="primary" size="large">
                            <a-icon type="close"></a-icon>
                        </a-button>
                    </a-button-group>
                </a-card>
            </div>

            <!-- 条件展示框 -->
            <div style="margin-bottom: 16px;">
                <div th:if="${#strings.isEmpty(brandIds)}">
                    <div>
                        <span>品牌：</span>
                    </div>
                    <a-card>
                        <a-button-group th:each="brand : ${result.brands}"
                                        style="margin-right: 10px;margin-bottom: 8px;">
                            <img style="height: 40px;border: 1px cadetblue solid;" th:src="${brand.brandImg}"
                                 alt="brand">
                            <a-button type="primary" size="large"
                                      th:href="${'javascript:searchProducts(&quot;brandId&quot;,'+brand.brandId+')'}">
                                <a-icon type="check"></a-icon>
                            </a-button>
                        </a-button-group>
                    </a-card>
                </div>
            </div>

            <!--分类-->
            <div style="margin-bottom: 16px;">
                <div class="sl_key">
                    <span>分类：</span>
                </div>
                <a-card>
                    <a-button-group th:each="catalog : ${result.catalogs}"
                                    style="margin-right: 10px;margin-bottom: 8px;">
                        <div style="width: 103px;
                                height: 40px;
                                cursor: pointer;
                                color: cadetblue;
                                text-align: center;
                                border: cadetblue 1px solid;
                                line-height: 40px;
                                font-size: 12px;">
                            <span th:text="${catalog.catalogName}"></span>
                        </div>
                        <a-button type="primary" size="large"
                                  th:href="${'javascript:searchProducts(&quot;catalog3Id&quot;,'+catalog.catalogId+')'}">
                            <a-icon type="check"></a-icon>
                        </a-button>
                    </a-button-group>
                </a-card>
            </div>

            <!--屏幕尺寸--> <!-- 其他所有需要展示的属性 -->
            <div style="margin-bottom: 16px;">
                <div th:each="attr : ${result.attrs}" th:if="${!#lists.contains(result.attrIds, attr.attrId)}"
                     style="margin-bottom: 16px;">
                    <div>
                        <span th:text="${attr.attrName}+'：'">屏幕尺寸：</span>
                    </div>
                    <a-card>
                        <a-button-group th:each="val : ${attr.attrValue}"
                                        style="margin-right: 10px;margin-bottom: 8px;">
                            <div style="width: 103px;
                                height: 40px;
                                cursor: pointer;
                                color: cadetblue;
                                text-align: center;
                                border: cadetblue 1px solid;
                                line-height: 40px;
                                font-size: 12px;">
                                <span th:text="${val}"></span>
                            </div>
                            <a-button type="primary" size="large"
                                      th:href="${'javascript:searchProducts(&quot;attrs&quot;,&quot;'+attr.attrId+'_'+val+'&quot;)'}">
                                <a-icon type="check"></a-icon>
                            </a-button>
                        </a-button-group>
                    </a-card>
                </div>
            </div>

            <!-- 排序 有无货显示 -->
            <div>
                <div th:with="p = ${param.sort}, priceRange = ${param.skuPrice}">
                    <div>
                        <span>排序：</span>
                    </div>
                    <a-card>
                        <a-button
                                type="primary"
                                size="large"
                                style="margin-bottom: 10px;"
                                sort="hotScore"
                                onclick="sort_a(this)"
                                th:class="${(!#strings.isEmpty(p)
                               && #strings.startsWith(p, 'hotScore')
                               && #strings.endsWith(p, 'desc')) ? 'sort_a desc' : 'sort_a'}"
                        >
                            综合排序
                            <a-icon
                                    th:type="${(!#strings.isEmpty(p)
                                    && #strings.startsWith(p, 'hotScore')
                                    && #strings.endsWith(p, 'desc'))
                                    ? 'down' : 'up'
                                }"
                            >
                            </a-icon>
                        </a-button>

                        <a-button
                                type="primary"
                                size="large"
                                sort="saleCount"
                                onclick="sort_a(this)"
                                th:class="${(!#strings.isEmpty(p)
                                   && #strings.startsWith(p, 'saleCount')
                                   && #strings.endsWith(p, 'desc'))
                                   ? 'sort_a desc' : 'sort_a'}"
                        >
                            销量
                            <a-icon
                                    th:type="${(!#strings.isEmpty(p)
                                    && #strings.startsWith(p, 'saleCount')
                                    && #strings.endsWith(p, 'desc'))
                                    ? 'down' : 'up'
                                }"
                            >
                            </a-icon>
                        </a-button>

                        <a-button
                                type="primary"
                                size="large"
                                sort="skuPrice"
                                onclick="sort_a(this)"
                                th:class="${(!#strings.isEmpty(p)
                                   && #strings.startsWith(p, 'skuPrice')
                                   && #strings.endsWith(p, 'desc'))
                                   ? 'sort_a desc' : 'sort_a'}"
                        >
                            价格
                            <a-icon
                                    th:type="${(!#strings.isEmpty(p)
                                    && #strings.startsWith(p, 'skuPrice')
                                    && #strings.endsWith(p, 'desc'))
                                    ? 'down' : 'up'
                                }"
                            >
                            </a-icon>
                        </a-button>

                        <div style="display: inline-flex;">
                            <a-tooltip title="仅显示有货">
                                <span th:with="check=${param.hasStock}">
                                    <a-input
                                            style="width: 45px;
                                            height: 40px;
                                            top: 15px;"
                                            type="checkbox"
                                            @click="showHasStocks"
                                            id="showHasStock"
                                            th:checked="${#strings.equals(check, '1')}">
                                    </a-input>
                                </span>
                            </a-tooltip>
                        </div>

                        <div>
                            <div>
                                <span>价格范围：</span>
                            </div>
                            <a-input-number
                                    size="large"
                                    style="width: 32%;"
                                    id="skuPriceFrom"
                                    v-model="valueFrom"
                                    :min="0"
                                    :max="100000"
                                    th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange, '_')}"
                            >
                            </a-input-number>
                            -
                            <a-input-number
                                    size="large"
                                    style="width: 32%;"
                                    id="skuPriceTo"
                                    v-model="valueTo"
                                    :min="0"
                                    :max="100000"
                                    th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange, '_')}"
                            >
                            </a-input-number>
                            <a-button
                                    type="primary"
                                    style="width: 30%;"
                                    size="large"
                                    id="skuSearchPriceBtn"
                                    @click="skuSearchPriceBtn">
                                确认
                            </a-button>
                            <!--                            当前值：{{ value }}-->
                        </div>
                    </a-card>
                </div>
            </div>
        </a-drawer>
    </div>
    <!-- 商品列表 -->
    <div style="width: 80%;margin: 80px auto;">
        <a-row :gutter="[16,16]">
            <a-col :span="6" th:each="product : ${result.getProducts()}">
                <a-card hoverable s
                        tyle="width: 260px; margin: 12px auto;">
                    <a-alert style="position: absolute; width: 100%; left: 0;" message="当前商品图片失效了，展示的为缺省图片" type="info"
                             close-text="X" th:if="${product.skuImg==''}"></a-alert>
                    <a th:href="|http://item.shushan.com/${product.skuId}.html|">
                        <img
                                slot="cover"
                                alt="example"
                                th:src="${product.skuImg==''?'https://res.vmallres.com/pimages//product/6941487225057/group//800_800_2909554823F12241C32B51454914908AC346E2F9A54FAB83.png':product.skuImg}"
                                style="width: 100%;"
                        />
                    </a>
                    <!--  <a-card style="width: 300px" hoverable>
                          <span th:utext="${product.skuTitle}"></span>
                      </a-card>-->
                    <a-popover title="信息">
                        <template slot="content">
                            <span th:utext="${product.skuTitle}"></span>
                        </template>
                        <a-button
                                style="float: right;
                                margin-top: 10px;
                                border-color: cadetblue;
                                color: rgb(224, 42, 42);
                                width: 82px;
                                display: block;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;">
                            <b style="color: #e02a2a" th:utext="${param.keyword}">

                            </b>
                        </a-button>
                    </a-popover>

                    <template slot="actions" class="ant-card-actions">
                        <!--                        <a-tooltip placement="topLeft" autoAdjustOverflow="true" th:utext="${product.skuTitle}">-->
                        <!--                            <a th:text="${product.skuTitle}" ></a>-->
<!--                        <a-icon key="setting" type="setting"></a-icon>-->
                        <!--                        </a-tooltip>-->
<!--                        <a-icon key="edit" type="edit"></a-icon>-->
<!--                        <a-icon key="ellipsis" type="ellipsis"></a-icon>-->
                    </template>
                    <a-card-meta th:title="'¥'+${#numbers.formatDecimal(product.skuPrice, 1,2)}"
                                 style="margin-top: 10px;">
                        <a-avatar
                                slot="avatar"
                                th:src="${product.skuImg==''?'https://res.vmallres.com/pimages//product/6941487225057/group//800_800_2909554823F12241C32B51454914908AC346E2F9A54FAB83.png':product.skuImg}">
                        </a-avatar>
                    </a-card-meta>
                </a-card>
            </a-col>
        </a-row>
    </div>
    <!-- 底部翻页 -->
    <div>
        <a-card style=" text-align: center;  font-size: 4rem; letter-spacing: 30px;">
             <span
               style="padding: 0 20px;"
               class="page_a"
               th:each="nav : ${result.pageNavs}"
               th:attr="pn=${nav}, style=${nav == result.pageNum ? 'border: 0;color:#ee2222;background: #fff' : '' }"
               th:text="${nav}"
             >
            </span>
        </a-card>
        <a-card>
            <a-button-group style="width: 100%;">
                <a-button
                        type="primary"
                        style="width: 48%; float: left;"
                        size="large"
                        class="page_a"
                        th:attr="pn=${result.pageNum - 1}"
                        th:if="${result.pageNum > 1}"
                >
                    <a-icon type="left-circle"></a-icon>
                    上一页
                </a-button>

                <a-button
                    type="primary"
                    style="width: 48%; right: -50%;"
                    size="large"
                    class="page_a" th:attr="pn=${result.pageNum + 1}"
                    th:if="${result.pageNum < result.totalPages}"
                >
                    下一页
                    <a-icon type="right-circle"></a-icon>
                </a-button>
            </a-button-group>
        </a-card>

<!--        <span class="page_span1">
            <a class="page_a" th:attr="pn=${result.pageNum - 1}"
               th:if="${result.pageNum > 1}">
                < 上一页
            </a>
            <a class="page_a"
               th:each="nav : ${result.pageNavs}"
               th:attr="pn=${nav}, style=${nav == result.pageNum ? 'border: 0;color:#ee2222;background: #fff' : '' }">
                [[${nav}]]
            </a>
            <a class="page_a" th:attr="pn=${result.pageNum + 1}"
               th:if="${result.pageNum < result.totalPages}">
                下一页 >
            </a>
        </span>
        <span class="page_span2">
            <em>共<b>[[${result.totalPages}]]</b>页&nbsp;&nbsp;到第</em>
            <input type="number" value="1">
            <em>页</em>
            <a class="page_submit">确定</a>
        </span>-->
    </div>
    <!-- 底部 -->
    <div class="mkl_footer"
         style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
        <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
            <div class="container">
                <div class="mkls_footer_grid">
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>地址:</h4>
                        <p>贵州省贵阳市清镇市,
                            <br> 云岭东路</p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>联系</h4>
                        <p>
                            <span>电话 : </span>182 xxxx 8687</p>
                        <p>
                            <span>邮箱 : </span>
                            <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                        </p>
                    </div>
                    <div class="col-xs-4 mkls_footer_grid_left">
                        <h4>营业时间:</h4>
                        <p>全天候</p>
                        <p>每周五维护
                            <span>(数据服务)</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right">
            <div class="container">
                <div class="allah-copy">
                    <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
                </div>
                <div class="footercopy-social">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="fa fa-facebook"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-twitter"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-rss"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-vk"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <!-- 顶部锚点 -->
    <div>
        <a-back-top></a-back-top>
    </div>
    <!-- 返回主页按钮 -->
    <div style="position:fixed; top: 5px; right: 5px;">
        <a-affix :offset-top="top">
            <a-button th:href="'http://shushan.com'" type="primary">
                返回主页
            </a-button>
        </a-affix>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                visible: false,
                keywordInput: "",
                valueFrom: 0,
                valueTo: 10000,
                top: 50,
            }
        },
        methods: {
            showDrawer() {
                this.visible = true;
            },
            onClose() {
                this.visible = false;
            },
            cart() {
                window.location.href = "http://cart.shushan.com/cart.html";
            },
            onSearch() {
                // window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                location.href = "?" + "keyword" + "=" + this.keywordInput;
                // console.log('搜索值',value);
            },
            skuSearchPriceBtn() {
                // setTimeout(() => {
                //     $('#skuSearchPriceBtn').unbind('click');
                //     $("#skuSearchPriceBtn").click(function (e){

                // console.log(jqery中的this,$(this))
                console.log("123")
                // 拼上价格区间
                let from = $("#skuPriceFrom").val()
                let to = $("#skuPriceTo").val()
                console.log(from, "-", to)
                let query = from + "_" + to
                location.href = replaceAndParamVal(location.href, "skuPrice", query)
                // e.stopPropagation();   //表示阻止向父元素冒泡
                // e.preventDefault();     //阻止 方法阻止元素发生默认的行为
                //     })
                // }, 0)

            },
            showHasStocks() {
                $('#showHasStock').unbind('change');
                $("#showHasStock").change(function () {
                    console.log("showHasStock")
                    // alert($("#showHasStock").prop('checked'))
                    if ($("#showHasStock").prop('checked')) {
                        console.log("选中了")
                        // 选中
                        location.href = replaceAndParamVal(location.href, "hasStock", 1)
                    } else {
                        console.log("妹选了")
                        let re = eval('/[?|&](hasStock=)([^&]*)/gi');
                        location.href = (location.href + "").replace(re, "")
                    }
                    return false
                })
            },
            searchProduct(name, value) {
                console.log("点击了searchProducts")

            },
            onChange(value) {
                console.log('changed', value);
            },
        }
    })

    function searchProducts(name, value) {
        console.log("点击了searchProducts")
        console.log("name", name)
        console.log("value", value)
        // 原来的页面
        //////////////////////////////////////////////////////////  todo 注意老师写的错误
        location.href = replaceAndParamVal(location.href, name, value, true)
    }

    // 排序功能
    function sort_a(data) {
        console.log("点击了sort_a")
        // 改变样式
        // changeStyle(this)
        // 跳转到指定位置 sort= skuPrice_asc/desc
        var sort = $(data).attr("sort")
        //////////////////////////////////////////////////////todo 顺序不太一样 请注意
        sort = $(data).hasClass("desc") ? sort + "_asc" : sort + "_desc"

        location.href = replaceAndParamVal(location.href, "sort", sort)


        return false// 禁用默认行为

    }

    // 页面跳转
    $(".page_a").click(function () {

        let pn = $(this).attr("pn")
        let href = location.href
        if (href.indexOf("pageNum") !== -1) {
            location.href = replaceAndParamVal(href, "&pageNum", pn)
        } else {
            location.href = location.href + "?pageNum=" + pn
        }
        return false
    })


    function sssss() {


    }

    // todo 外部方法可以调用！！！
    function replaceAndParamVal(url, paramName, replaceVal, forceAdd) {
        let oUrl = url.toString();
        // 1、如果没有就添加，有就替换
        if (oUrl.indexOf(paramName) !== -1) {
            if (forceAdd) {
                let nUrl = "";
                if (oUrl.indexOf("?") !== -1) {
                    nUrl = oUrl + "&" + paramName + "=" + replaceVal;
                } else {
                    nUrl = oUrl + "?" + paramName + "=" + replaceVal;
                }
                return nUrl;
            } else {
                let re = eval('/(' + paramName + '=)([^&]*)/gi');
                return oUrl.replace(re, paramName + '=' + replaceVal);
            }
        } else {
            let nUrl = "";
            if (oUrl.indexOf("?") !== -1) {
                nUrl = oUrl + "&" + paramName + "=" + replaceVal;
            } else {
                nUrl = oUrl + "?" + paramName + "=" + replaceVal;
            }
            return nUrl;
        }
    }


    // $("#skuSearchPriceBtn").click(function (){
    //     console.log("123")
    //     // 拼上价格区间
    //     var from = $("#skuPriceFrom").val()
    //     var to = $("#skuPriceTo").val()
    //
    //     var query = from +"_"+to
    //     location.href = replaceAndParamVal(location.href,"skuPrice", query)
    // })
    // function skuSearchPriceBtn () {
    //     console.log("123")
    //     // 拼上价格区间
    //     var from = $("#skuPriceFrom").val()
    //     var to = $("#skuPriceTo").val()
    //
    //     var query = from +"_"+to
    //     location.href = replaceAndParamVal(location.href,"skuPrice", query)
    // }


</script>
</body>
</html>